
<template>
<div class="homepreview">
  <div class="title">
    <span>监测时长:{{time.day}}天{{time.h}}小时{{time.h}}分</span>
    <span>放电次数:{{num}}次</span>
  </div>
  <div class="content">
    <div class="left"></div>
    <div class="pie" id="pie"></div>
  </div>
  <div class="table">
    <el-table
    :data="tableData"
    ref="multipleTableDevice"
    tooltip-effect="dark"
    style="width: 100%"
    border
    :default-sort = "{prop: 'num', order: 'descending'}"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
      </el-table-column>
    <el-table-column
      type="index"
      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
      label="类型"
      prop="name">
    </el-table-column>
    <el-table-column
      prop="num"
      label="放电次数"
      sortable>
    </el-table-column>
    <el-table-column
      prop="address"
      label="放电强度最大值(mV)"
      sortable>
    </el-table-column>
    <el-table-column
      prop="zhanbi"
      sortable
      label="占比">
    </el-table-column>
    <el-table-column
      prop="name"
      label="位置">
    </el-table-column>
  </el-table>
  </div>
  <el-button type="primary" style="float: right;">确认分析</el-button>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data () {
    return {
      time:{
        day:12,
        h:12,
        m:50
      },
      num:50,
      tableData: [{
          num: '1000',
          name: '内部',
          address: '1',
          zhanbi:'10%'
        }, {
          num: '2000',
          name: '内部',
          address: '1',
          zhanbi:'30%'
        }, {
          num: '1500',
          name: '外部',
          address: '2',
          zhanbi:'20%'
        }, {
          num: '1000',
          name: '内部',
          address: '3',
          zhanbi:'10%'
        },],
        multipleSelection: []
    }
  },
  mounted(){
    this.getPie();
    this.$nextTick(() => {
      for (let i = 0; i < this.tableData.length; i++) {
        this.$refs.multipleTableDevice.toggleRowSelection(
          this.tableData[i],
          true
        );
      }
    });
  },
  methods:{
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getPie(){
      var echart = document.getElementById("pie");
      var myChart = echarts.init(echart);
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '第一季度' },
              { value: 735, name: '第二季度' },
              { value: 580, name: '第三季度' },
              { value: 484, name: '第四季度' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
}
</script>
<style scoped>
  .homepreview {
    width: 100%;
    height: 1080px;
    background-color: #fff;
    padding: 3px 8px;
    /* background-color: #30335f */
  }
  .title {
    height: 60px;
    line-height: 60px;
    font-size: 22px;
    text-align: center;
  }
  .title span:nth-child(1){
    margin-right: 80px;
  }
  .content {
    height: 200px;
    border: 1px solid;
    padding: 5px 20px;
    display: flex;
  }
  .left {
    width: 70%;
    height: 100%;
    background: pink;
  }
  .pie {
    width: 400px;
    height: 100%;
  }
  .table {
    height: 300px;
  }
</style>